import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import ParticleBackground from '../../components/ParticleBackground'
import './index.css'

export default defineComponent({
  name: 'Home',
  setup() {
    const router = useRouter()

    const dashboards = [
      {
        id: 'realtime',
        title: '实时数据大屏',
        description: '展示实时数据趋势、区域分析、系统监控等',
        icon: '📊',
        path: '/dashboard/realtime',
        color: '#00d4ff'
      },
      {
        id: 'covid',
        title: '全国疫情实时动态',
        description: '全国疫情数据地图、趋势分析、地区排行',
        icon: '🦠',
        path: '/dashboard/covid',
        color: '#ff4d4f'
      },
      {
        id: 'command-center',
        title: '作战指挥中心',
        description: '战场态势感知、兵力部署、任务管理',
        icon: '⚔️',
        path: '/dashboard/command-center',
        color: '#00ff88'
      },
      {
        id: 'digital-twin',
        title: '智慧园区数字孪生',
        description: '3D园区模型、交通流量、建筑分布、景观湖泊',
        icon: '🏢',
        path: '/dashboard/digital-twin',
        color: '#9c27b0'
      }
    ]

    const goToDashboard = (path: string) => {
      router.push(path)
    }

    return () => (
      <div class="home">
        <ParticleBackground />

        <div class="home__bg">
          <div class="home__bg-grid"></div>
          <div class="home__bg-glow home__bg-glow--1"></div>
          <div class="home__bg-glow home__bg-glow--2"></div>
        </div>

        <header class="home__header">
          <h1 class="home__title">数据可视化大屏系统</h1>
          <p class="home__subtitle">Data Visualization Platform</p>
        </header>

        <div class="home__content">
          <div class="home__grid">
            {dashboards.map(dashboard => (
              <div
                key={dashboard.id}
                class="home__card"
                style={`--card-color: ${dashboard.color}`}
                onClick={() => goToDashboard(dashboard.path)}
              >
                <div class="home__card-icon">{dashboard.icon}</div>
                <h3 class="home__card-title">{dashboard.title}</h3>
                <p class="home__card-description">{dashboard.description}</p>
                <div class="home__card-arrow">→</div>
              </div>
            ))}
          </div>
        </div>

        <footer class="home__footer">
          <p>点击卡片进入对应的数据大屏</p>
        </footer>
      </div>
    )
  }
})
